<template>
  <div>
    <a-space class="operation">
      <a-input :style="{ width: '250px' }" placeholder="输入监测点名称" allow-clear v-model="inp.name" />
      <a-button type="primary" @click="search">查询</a-button>
      <a-button type="dashed" @click="reset">重置</a-button>
      <a-button type="primary" class="last" @click="pointAdd">新增</a-button>
      <a-drawer :mask="true" :width="340" :visible="visibleAdd" @ok="Ok" @cancel="Cancel" :footer="false">
        <template #title> 新增监测点信息 </template>
        <h3>基础信息</h3>
        <p>*所属组织</p>
        <div>
          <p>*监测点编号</p>
          <a-input :style="{ width: '250px' }" placeholder="请输入编号" allow-clear v-model="ADD.number" />
        </div>
        <div>
          <p>*监测点名称</p>
          <a-input :style="{ width: '250px' }" placeholder="请输入名称" allow-clear v-model="ADD.name" />
        </div>
        <div>
          <p>安装时间</p>
          <a-date-picker style="width: 200px" v-model="ADD.setTime" />
        </div>
        <div>
          <p>*压力高程</p>
          <a-input :style="{ width: '250px' }" placeholder="请输入编号" allow-clear v-model="ADD.height" />
        </div>
        <div>
          <p>*创建人</p>
          <a-input :style="{ width: '250px' }" placeholder="请输入编号" allow-clear v-model="ADD.person" />
        </div>
        <div>
          <p>*创建时间</p>
          <a-date-picker style="width: 200px" v-model="ADD.time" />
        </div>
        <div>
          <p>安装完成情况</p>
          <a-input :style="{ width: '250px' }" placeholder="请输入完成情况" allow-clear v-model="ADD.status" />
        </div>
        <a-button type="primary" @click="dataAdd()">确定</a-button>
      </a-drawer>
    </a-space>
    <a-card class="card" title="数据列表">
      <a-table :columns="columns" :data="obser.tableData" :bordered="{ cell: true }" page-size="4" :pagination="false">
        <template #optional="obj">
          <icon-edit />
          <span style="cursor: pointer; color: #0079fe" @click="handleClick(obj.rowIndex, obj.record.objectId)">
            编辑
          </span>
          <icon-close-circle />
            <span style="cursor: pointer; color: #0079fe" @click="del(obj)">删除</span>
        </template>
      </a-table>

      <a-pagination :total="total" show-page-size :page-size="4" :page-size-options="[4, 8, 12, 16, 20]"
        @change="Change" />
    </a-card>
    <a-drawer :mask="true" :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" :footer="false">
      <template #title> 编辑监测点信息 </template>
      <h3>基础信息</h3>
      <p>*所属组织</p>
      <div>
        <p>*监测点编号</p>
        <a-input :style="{ width: '250px' }" placeholder="请输入编号" allow-clear v-model="info.number" />
      </div>
      <div>
        <p>*监测点名称</p>
        <a-input :style="{ width: '250px' }" placeholder="请输入名称" allow-clear v-model="info.name" />
      </div>
      <div>
        <p>安装时间</p>
        <a-date-picker style="width: 200px;" v-model="info.setTime" />
      </div>
      <div>
        <p>*压力高程</p>
        <a-input :style="{ width: '250px' }" placeholder="请输入编号" allow-clear v-model="info.height" />
      </div>
      <div>
        <p>*创建人</p>
        <a-input :style="{ width: '250px' }" placeholder="请输入姓名" allow-clear v-model="info.person" />
      </div>
      <div>
        <p>*创建时间</p>
        <a-date-picker style="width: 200px;" v-model="info.time" />
      </div>
      <div>
        <p>安装完成情况</p>
        <a-input :style="{ width: '250px' }" placeholder="请输入完成情况" allow-clear v-model="info.status" />
      </div>
      <a-button type="primary" @click="obserUpdate(info)">确定</a-button>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useObser } from '../../store/obserData';
import { obserPost, obserGet, obserDel, contGet, obserPut, textGet } from "../../api/obser/obserData";
import {Message} from "@arco-design/web-vue";

interface ObserType {
  number: string,
  name: string,
  setTime: string,
  height: string,
  person: string,
  time: string,
  objectId: string,
  status: string,
  index: number
}

let ADD = reactive({
  number: ""
  , name: ""
  , setTime: ""
  , height: ""
  , person: ""
  , time: ""
  //  ,objectId:""
  , index: 0,
  status: ""
});

let inp = ref({ name: "" });
let info = ref({
  number: ""
  , name: ""
  , setTime: ""
  , height: ""
  , person: ""
  , time: "",
  objectId: '',
  status: '',

});
let visibleAdd = ref(false);
let visible = ref(false);
const obser = useObser()
let total = 0;
//获取数据库数据
getData()

//查询页码
function Change(page: any) {
  console.log(contGet);
  getData(page)
}

//按钮查询
function search() {
  let name = inp.value.name;
  contGet(name).then((res) => {
    // let { results}=res.data
    // obser.tableData = results
    con(res.data)
  })
}

//重置按钮事件
function reset() {
  getData()
}

//新增监测点的抽屉
const pointAdd = () => {
  visibleAdd.value = true;
  ADD.number = "";
  ADD.name = "";
  ADD.setTime = "";
  ADD.height = "";
  ADD.person = "";
  ADD.time = "";
  ADD.status = "";
};
const Ok = () => {
  visibleAdd.value = false;
};
const Cancel = () => {
  visibleAdd.value = false;
}

//编辑监测点的抽屉
let idx = ref<number>()
const handleClick = (index: number, objectId: string) => {
  let { height, name, number, person, setTime, time, status } = obser.tableData[index]
  info.value = { height, name, person, setTime, time, number, objectId, status }
  obser.tableData[index] != info.value
  idx.value = index
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
//创建表头
const columns = reactive([
  {
    title: "监测点编号",
    dataIndex: "number",
    width: 100,
  },
  {
    title: "监测点名称",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "安装时间",
    dataIndex: "setTime",
    width: 100,
  },
  {
    title: "压力高程",
    dataIndex: "height",
    width: 100,
  },
  {
    title: "创建人",
    dataIndex: "person",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "time",
    width: 100,
  },
  {
    title: "安装完成情况",
    dataIndex: "status",
    width: 100,
  },
  {
    title: "操作",
    slotName: "optional",
    width: 100,
  },
]);

//新增数据
function dataAdd() {
  xzBj();
}
//更新表格内数据
let obserUpdate = (info: any) => {
  let { height, index, name, number, objectId, person, setTime, status, time } =
    info;
  let newObj = {
    height,
    index,
    name,
    number,
    person,
    objectId,
    setTime,
    time,
    status: status === "已完成" ? 1 : 2,
  };
  obserPut(objectId, newObj).then((res) => {
    obser.obserUpdate(newObj);
    // getData()
  });

  visible.value = false;
};

//删除监测点数据
function del(obj: any) {
  obserDel(obj.record.objectId).then((res) => {
    obser.tableData.splice(obj.rowIndex, 1); //删除本地
  });
}

// 封装
function getData(page = 0) {
  textGet(page).then((res) => {
    let { results, count } = res.data;
    let arr = ref<Array<ObserType>>([]);
    results.forEach((item: any) => {
      let newObj = {
        height: item.height,
        index: item.index,
        name: item.name,
        number: item.number,
        objectId: item.objectId,
        person: item.person,
        setTime: item.setTime,
        status: item.status === 1 ? "已完成" : "未完成",
        time: item.time,
      };
      arr.value.push(newObj);
    });
    // console.log(results)
    obser.tableData = arr.value;
    total = count;
  });
}

function con(data: any) {
  let { results } = data;
  let arr = ref<Array<ObserType>>([]);

  results.forEach((item: any) => {
    let newObj = {
      height: item.height,
      index: item.index,
      name: item.name,
      number: item.number,
      objectId: item.objectId,
      person: item.person,
      setTime: item.setTime,
      status: item.status === 1 ? "已完成" : "未完成",
      time: item.time,
    };
    arr.value.push(newObj);
  });
  // console.log(results)
  obser.tableData = arr.value;
}

function xzBj() {
  let ostatus = ADD.status === "已完成" ? 1 : 2;
  let status = Number(ostatus);
  let newObj = {
    height: ADD.height,
    index: ADD.index,
    name: ADD.name,
    number: ADD.number,
    person: ADD.person,
    setTime: ADD.setTime,
    status,
    time: ADD.time,
  };
  obserPost(newObj).then((res) => {
    obser.obserAdd(newObj);
    getData();
  });
  visibleAdd.value = false;
}
</script>

<style scoped>
.operation {
  width: 99%;
  height: 55px;
  border: 1px solid #d9f0ff;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-left: 0.5%;
}

.card {
  width: 99%;
  height: 630px;
  border: 2px solid #8dd1ff;
  margin-left: 0.5%;
  margin-top: 0.5%;
}

.last {
  margin-right: 10px;
}
</style>
